<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <title>Pizza</title>
  <link rel="stylesheet" href="../pizza/css/ui.css?_t=1510195133000">
</head>
<body class="pz-contain">
<h2>图片截取</h2>
<hr class="fn-mt10">
<div class="pz-boxhead fn-mt20">
  <em class="icon pz-icon icon-manageorder"></em>
  <span class="title">图片截取</span>
</div>
<div class="pz-boxbody fn-pd15">
  <!-- <div id="j-cutbar" class="fn-hide"> -->
    <div id='j-cutbar'>
    <div id="j-imgbtn" class="fn-mt10">
      <label class="pz-btn btn-primary">A选择图片<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" class="fn-hide"></label>
    </div>
    <hr class="fn-mt10">
    <div id="j-cutimg-pop" class="fn-mt10"></div>
  </div>
</div>
<div class="pz-boxbody fn-pd15">
  <div id="j-b-imgbtn" class="fn-mt10">
    <label class="pz-btn btn-primary">B选择图片<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" class="fn-hide"></label>
  </div>
  <hr class="fn-mt10">
  <div id="j-b-cutimg-pop" class="fn-mt10"></div>
</div>
<div class="pz-boxbody fn-pd15">
    <div id="j-c-imgbtn" class="fn-mt10">
      <label class="pz-btn btn-primary">C选择图片<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" class="fn-hide"></label>
    </div>
    <hr class="fn-mt10">
    <div id="j-c-cutimg-pop" class="fn-mt10"></div>
</div>
<script type="text/javascript" src="//static.xinhuaapp.com/js/jquery-1.11.0-min.js"></script>
<script type="text/javascript" src="//static.xinhuaapp.com/js/juicer-min.js"></script>
<script type="text/javascript" src="../pizza/js/pizza.js?_t=1510649614000"></script>
<script>
if (window.FileReader) {
  (function(){
    // 创建选择图片框，通过这种方式创建是为了避免file选择同一个文件时无法出发change事件
    var imgBtnHtml = $('#j-imgbtn').html();
    function createImgbtn(){
      $('#j-imgbtn').html(imgBtnHtml);
      $('#j-imgbtn input').on('change', function () {
        changeImgFn(this.files[0]);
      });
    }

    // 模版加载完后再显示选择框
    // if(!pizzaTpl.pzCutimg){
    //   pizzaCmd.tpl('cutimg.html', function(){
    //     $('#j-cutbar').removeClass('fn-hide');
    //     createImgbtn();
    //   });
    // }else{
      $('#j-cutbar').removeClass('fn-hide');
      createImgbtn();
    // }
    

    // 选择图片
    function changeImgFn(file){
      var cutimgConf = {
        'file': file,
        'width': 320,
        'height': 180,
        'scale': 0.8
      };
      cutimgConf['padding'] = cutimgConf['width'] < cutimgConf['height'] ? Math.ceil(cutimgConf['width']/4) : Math.ceil(cutimgConf['height']/4);
      var cutimgHtml = juicer(pizzaTpl['pzCutimg'], cutimgConf);
      // 弹出框
      new parent.pizzaCmd.overlay(cutimgHtml, function (newThis) {
        newThis.show();
        var newCutimg = new pizzaCmd.cutimg(newThis.obj, cutimgConf);
        // 关闭取消截取图片
        newThis.obj.find('.j-overlay-close').click(function(){
          newThis.remove();
          createImgbtn();
        });
        // 返回截取的图片
        newThis.obj.find('.j-cutimg-true').click(function(){
          var cutimgBase64 = newCutimg.save();
          if (cutimgBase64) {
            $('#j-cutimg-pop').html('<img src="'+cutimgBase64+'">');
          }
          newThis.remove();
          createImgbtn();
        });
      });
    }
  })()
  var newCutimgBtn = new pizzaCmd.clipimg($("#j-b-imgbtn input"), {
    callback: function(url){
      $("#j-b-cutimg-pop").html("<img src=\""+ url +"\" />");
    }
  })
} else {
  $('#j-cutbar').removeClass('fn-hide')
    .html('该浏览器不支持图片截取功能，建议使用谷歌的Chrome浏览器');
}
</script>
</body>
</html>